<template>
  <div class="server">
      <!-- 内容组件 -->
      <content-template :formData="formData"
                        :searchData="searchData"
                        :tableData="tableData"
                        :getDatas ="getDatas"
                        @handleSubmit="handleSubmit">
      </content-template>
      <!-- 弹框组件 -->
      <dialog-template
              :options = "formData.options.hasAdd">
              <!-- 表单组件 -->
          <form-template
              :formData="formData"
              :options="formData.options.hasAdd"
              :formValidate="formData.formValidate"
              :rules="formData.ruleValidate"
              :list="formData.list"
              @handleSubmit="handleSubmit"
          >             
          </form-template>
      </dialog-template>
  </div>
</template>
<script>

export default {
   data() {
    return {
      modal1:false,
      vip_price:0,
      vip_gold:0,
      vip_day:0,
      action_pwd:'',
      paw:'',
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
            modal: false,        //弹框状态
            isedit: false,       //是否是编辑状态
            title:'会员权益' ,      //弹框标题
            width:800,           //弹框宽度
            class:"dialogClass", //弹框类名
            zIndex:100,          //弹框层级
            loading:true,        //弹框加载圈

            formValidate: {    //获取的表单数据
              content: '', 
            },
            ruleValidate: {    //验证表单信息
              content: [
                {required: true, message: '请填写会员权益内容', trigger: 'blur' }
              ],
            },
          },
          hasSelect:{
            selectList:[
               
            ]
          }       
        },
        list: [ //表单列表——进行一些表单操作
          // {
          //    type: 表单类型,
          //    label: 表单标题，
          //    prop:表单下标指引，要对应formValidate的字段
          //    formStyle:自定义表单的样式
          //    value:传入自定义数据
          // }
          {
            type: "input",      
            prop: "content",
            label: "权益内容",
            placeholder:"权益内容",
            value:''
          },
        ],
      },
      searchData:{  
        searchValue: {  //搜索值
  
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
            {
                type: 'index',
                width: 60,
                align: 'center'
            },
            {
                title: '会员权益',
                key: 'content',
                align: 'center',
            },
            {
              title: '操作',
              key: 'action',
              width: 200,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.edit(params.index)
                      }
                    }
                  }, '修改'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.deletes(params.index)
                      }
                    }
                  }, '删除'),
                ]);
              }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:10,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  mounted() {
    this.getDatas();
    this.getserver()
  },
  methods: {
    getDatas(){
      let params = {
        page:this.tableData.page,
        per_page:this.tableData.per_page,
      }
      this.$api.getvip_content(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    edit(index){
      this.formData.index = index;
      this.formData.options.hasAdd.formValidate = {
        content: this.tableData.data[index].content,
      };
      this.formData.options.hasAdd.isedit = true
      this.formData.options.hasAdd.modal = true
    },
    deletes(index){
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除该权益内容吗?',
        onOk: () => {
          let params = {
            vip_content_id : this.tableData.data[index].vip_content_id
          }
          this.$api.deletesvip_content(params).then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$Message.success('删除成功');
                this.getDatas();
              }
          })
        }
      })
    },
    handleSubmit(value){
        if ( this.formData.options.hasAdd.isedit == true) {
          let params = {
            vip_content_id :  this.tableData.data[this.formData.index].vip_content_id,
            content: this.formData.options.hasAdd.formValidate.content,
          };
          this.$api.editvip_content(params)
            .then(res => {
              console.log(res);
              if (res.code == 200) {
                this.formData.options.hasAdd.modal = false;
                this.$Message.success('修改成功');
                this.getDatas();
              }
          })
        }else{
          let params = {
            content: this.formData.options.hasAdd.formValidate.content,
          }
          this.$api.createvip_content(params)
            .then(res => {
              console.log(res);
              if (res.code == 200) {
                this.formData.options.hasAdd.modal = false;
                this.$Message.success('添加成功');
                this.getDatas();
              }
          })
        }
    },
  },
  components: {
    
  }
}
</script>
<style lang="less" scoped>
    @import './pay.less';
</style>
